// 学习进度柱状图模块
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  // 渲染函数
  function render() {
    var data = Config.learningData.percentages;
    var titlename = Config.learningData.titles;
    var valdata = Config.learningData.values;
    var myColor = Config.colors.progress;

    var option = {
      grid: {
        top: "10%",
        left: "22%",
        bottom: "10%"
      },
      xAxis: {
        show: false
      },
      yAxis: [
        {
          show: true,
          data: titlename,
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            rich: {
              lg: {
                backgroundColor: "#339911",
                color: "#fff",
                borderRadius: 15,
                align: "center",
                width: 15,
                height: 15
              }
            }
          }
        },
        {
          show: true,
          inverse: true,
          data: valdata,
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          }
        }
      ],
      series: [
        {
          name: "条",
          type: "bar",
          yAxisIndex: 0,
          data: data,
          barCategoryGap: 50,
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 20,
              color: function(params) {
                var num = myColor.length;
                return myColor[params.dataIndex % num];
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{c}%"
            }
          }
        },
        {
          name: "框",
          type: "bar",
          yAxisIndex: 1,
          barCategoryGap: 50,
          data: [100, 100, 100, 100, 100],
          barWidth: 15,
          itemStyle: {
            normal: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  // 初始渲染
  render();

  // 监听窗口大小变化
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 监听技术点击事件
  myChart.on('click', function(params) {
    if (params.seriesName === "条") {
      const tech = {
        name: Config.learningData.titles[params.dataIndex],
        value: params.value
      };
      EventBus.emit("techSelected", tech);
    }
  });
  if (window.EventBus) {
    window.EventBus.on("updateBarChart1", function (district) {
      console.log("柱状图1更新:", district.name);
    });
  }
})();
